<template>
  <div class="analysis-view">
    <div class="page-header">
      <h2>穿搭分析</h2>
      <p>深入了解您的穿搭习惯和偏好</p>
    </div>

    <!-- 分析类型选择 -->
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="使用频率" name="usage">
        <UsageAnalysis />
      </el-tab-pane>
      
      <el-tab-pane label="颜色偏好" name="color">
        <ColorAnalysis />
      </el-tab-pane>
      
      <el-tab-pane label="风格分析" name="style">
        <StyleAnalysis />
      </el-tab-pane>
      
      <el-tab-pane label="购买建议" name="buying">
        <BuyingAnalysis />
      </el-tab-pane>
      
      <el-tab-pane label="季节分析" name="seasonal">
        <SeasonalAnalysis />
      </el-tab-pane>
      
      <el-tab-pane label="综合报告" name="comprehensive">
        <ComprehensiveReport />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import UsageAnalysis from '@/components/analysis/UsageAnalysis.vue'
import ColorAnalysis from '@/components/analysis/ColorAnalysis.vue'
import StyleAnalysis from '@/components/analysis/StyleAnalysis.vue'
import BuyingAnalysis from '@/components/analysis/BuyingAnalysis.vue'
import SeasonalAnalysis from '@/components/analysis/SeasonalAnalysis.vue'
import ComprehensiveReport from '@/components/analysis/ComprehensiveReport.vue'

const activeTab = ref('usage')

const handleTabChange = (tabName) => {
  console.log('切换到分析类型:', tabName)
}
</script>

<style scoped>
.analysis-view {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}
</style>
